<template>
    <div class="chat_form">
        <div class="menu">
            <img id="avatar" :src="avatar"/>
        </div>
        <div class="container">
            <div class="person_list">
                <ul style="margin-top: 5px">

                    <li v-for="item of chatUsers" :key="item.id" style="margin-left: 10px"
                        @click="changeNickname($event)">
                        <img :src="item.avatar" style="width: 40px;height: 40px;margin-top: 5px;line-height: 40px"/>
                        <span style="font-weight: 400;margin-left: 10px" class="nickname">{{item.nickname}}</span>
                    </li>


                </ul>

            </div>
            <div class="chat_title"><span style="margin-left: 20px">{{currentNickname}}</span></div>
            <div class="chat_content" style="border-top: 1px solid ">
                <textarea name="" id="content" cols="30" rows="10" placeholder="按Enter发送"

                ></textarea>
                <div style="position: absolute;margin-top: -90px;margin-left: 500px">
                    <button @click="send">发送</button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>

    import {send, receive, chat_list} from '@/api/im'

    export default {
        name: "chat",
        data() {
            return {
                avatar: "",
                nickname: "",
                fromUserId: "",
                toUserId: 1,
                content: "",
                chatUsers: [],
                currentNickname: ""
            }
        },

        methods: {
            getUserInfo() {
                let userInfo = localStorage.getItem("userInfo");
                console.log("userInfo===>" + userInfo);
                this.avatar = JSON.parse(userInfo).avatar;
                this.nickname = JSON.parse(userInfo).nickname;
                this.fromUserId = JSON.parse(userInfo).userId;
            },
            changeNickname(e) {
                this.currentNickname = e.currentTarget.getElementsByClassName("nickname")[0].innerHTML
            },

            receive() {
                let userInfo = localStorage.getItem("userInfo");
                let userId = JSON.parse(userInfo).userId;
                let params = {};
                params.fromUserId = userId;
                receive(params).then(res => {
                    if (res.status === 200) {
                        console.log(res.data.list)
                    }
                })
            },

            chatList() {
                let userInfo = localStorage.getItem("userInfo");
                let userId = JSON.parse(userInfo).userId;
                let params = {};
                params.fromUserId = userId;
                chat_list(params).then(res => {
                    if (res.status === 200) {
                        this.chatUsers = res.data;
                    }
                })
            },

            send() {
                let params = {};
                this.content = document.getElementById("content").value;
                params.fromUserId = this.fromUserId;
                params.toUserId = this.toUserId;
                params.content = this.content;
                send(params).then(res => {
                    if (res.status === 200) {
                        document.getElementById("content").value = "";
                    }
                })
            },


        },
        mounted() {
            this.getUserInfo();
            this.receive();
            this.chatList();
        },
    }
</script>

<style scoped>
    .chat_form {
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    }

    .menu {
        width: 80px;
        height: 600px;
        margin: 50px 380px;
        background-color: #282828;
        position: absolute;
    }

    .chat_title {
        position: absolute;
        height: 60px;
        width: 536px;
        background-color: #F0FFFF;
        margin-left: 265px;
        color: #282828;
        line-height: 60px;
        font-size: 20px;


    }

    textarea {
        height: 100%;
        width: 100%;
        border: none;
        outline: none;
        font-family: "Micrsofot Yahei";
        resize: none;
    }

    table {
        margin-top: 10px;

    }

    tr:hover {
        background-color: #dafdf3;
    }

    tr {
        width: 265px;
    }


    td:last-child {
        padding-left: 20px;
    }

    .chat_content {
        position: absolute;
        margin-top: 400px;
        height: 200px;
        width: 536px;
        background-color: #f9f9f9;
        margin-left: 265px;
        color: #282828;
        line-height: 60px;
        font-size: 20px;
    }

    .person_list {
        width: 265px;
        height: 600px;

        background-color: #F0F8FF;
        position: absolute;
    }

    .container {
        width: 800px;
        height: 600px;
        box-shadow: 1px 1px 15px #909090;
        margin-top: 50px;
        margin-left: 450px;
        position: absolute;
    }

    ul li:hover {
        background-color: #CCCCCC;
        cursor: pointer;
    }

    #avatar {
        width: 35px;
        height: 35px;
        margin-left: 16px;
        margin-top: 20px;
    }

</style>
